@import url(./normalize.css);

body{
	width: 100%;
	min-height: 100%;
	overflow-x: hidden;
	position: absolute;
	background-image: url(../images/bg.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0 0;
	background-attachment: fixed;
	font-family: "microsoft yahei";
	-webkit-touch-callout: none;
	-webkit-user-select: auto;
	a,button,input,li,img{
	    -webkit-tap-highlight-color:rgba(255,0,0,0);
	}
	
	.show{
		display: block !important;
	}
	.zoomOut {
	  -webkit-animation: zoomOut 1s forwards;
	  animation: zoomOut 1s forwards;
	}

	img{
		max-width: 640px;
		width: 90%;
		position: relative;
		left: 5%;
	}
	
	img.shake{
		-webkit-animation: shake 1.5s 0.5s infinite;
		animation: shake 1.5s 0.5s infinite;
	}
	
	.title{
		position: relative;

		img.logo{
			position: absolute;
			top: 0;
		}
		img:first-child{
			z-index: 2;
		}
	}
	
	.zoomIn{
		-webkit-animation: zoomIn 1s ease both;
		animation: zoomIn 1s ease both;
	}

	.bus_circle{ 
		margin-top: -6%;
		position: relative;
		visibility: hidden;
		width: 0;
		height: 0;
		>img{
			width: 100%;
			position: absolute;
			max-width: 5000px;
			left: 0;
			z-index: 0;
		}
		
		>h1{
			position: absolute;
			width: 100%;
			top: 50%;
			margin: 0;
			text-align: center;
			font-size: 6em;
			line-height: 0;
			z-index: 999;
		}

		.bus{
			position: relative;

			img{
				width: 100%;
				max-width: 5000px;
				left: 0;
				-webkit-animation: rotate 5s linear infinite;
				animation: rotate 5s linear infinite;
			}
		}

		.hand{
			position: absolute;
			bottom: -40%;
			left: 0;
			width: 100%;

			img{
				width: 100%;
				max-width: 5000px;
				left: 0;
				animation: moveUp 3s linear infinite;
				-webkit-animation: moveUp 3s linear infinite;
			}

			p{
				background-color: #fff;
				width: 120px;
				height: 40px;
				line-height: 40px;
				border-radius: 4px;
				padding: 0 12px;
				position: absolute;
				top: -200%;
				right: 20%;
				display: none;
				z-index: 999;
			}
		}

		.cloud{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;

			img{
				animation: moveToLeft 15s linear infinite forwards;
				-webkit-animation: moveToLeft 15s linear infinite forwards;
				z-index: 3;
			}

			img:first-child{
				width: 80px;
				position: absolute;
				top: 0;
				left: 200%;
			}

			img:last-child{
				width: 60px;
				position: absolute;
				bottom: 0;
				left: 100%;
			}
		}
	}
	
	ul.btn_wrapper:after{
		content: "";
		display: table;
		clear: both;
	}
	ul.btn_wrapper{
		list-style: none;
		padding: 0 13%;
		margin: 0;
		visibility: hidden;
		width: 0;
		height: 0;

		li{
			float: left;
			margin-top: 50px;
			width: 25%;
			text-align: center;
			position: relative;

			img{
				width: 100%;
				left: 0;
				top: 0;
			}
		}

		li:nth-child(2){
			margin-top: 0px;
			width: 50%;
			text-align: center;

			img{
				width: 90%;
			}
			span{
				position: absolute;
				top: 5%;
				right: 0;
				margin-right: 28%;
				width: 30px;
				height: 30px;
				background-color: #fb0808;
				border-radius: 999px;
				display: none;
			}
			@media screen and (min-width:320px) and (max-width:480px){
				span{
					width: 20px;
					height: 20px;
					top: 0;
					margin-right: 25%;
				}
			}
		}
	}
	
}

// zoomOut
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
    visibility:hidden;
    width: 0;
    height: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
    visibility:hidden;
    width: 0;
    height: 0;
  }
}
// zoomOut
// zoomIn
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    width: 0;
    height: 0;
    visibility: hidden;
    -webkit-transform: scale3d(0,0,0);
    transform: scale3d(0,0,0);
  }

  to {
    opacity: 1;
    width: auto;
    height: auto;
    visibility: visible;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    width: 0;
    height: 0;
    visibility: hidden;
    -webkit-transform: scale3d(0,0,0);
    transform: scale3d(0,0,0);
  }

  to {
    opacity: 1;
    width: auto;
    height: auto;
    visibility: visible;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
}
// zoomIn
// shake
@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
}
// shake

// rotate
@-webkit-keyframes rotate {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 0);
    transform: rotate3d(0, 0, 1, 0);
  }
}

@keyframes rotate {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 0);
    transform: rotate3d(0, 0, 1, 0);
  }
}

// moveToLeft
@-webkit-keyframes moveToLeft {
  from {
  }

  to {
    -webkit-transform: translate3d(-1300px, 0, 0);
    transform: translate3d(-1300px, 0, 0);
  }
}

@keyframes moveToLeft {
  from {
  }

  to {
    -webkit-transform: translate3d(-1300px, 0, 0);
    transform: translate3d(-1300px, 0, 0);
  }
}
// moveToLeft

// moveUp
@-webkit-keyframes moveUp {
  from {
  }
  50%{
  	-webkit-transform: translate3d(0, -100px, 0);
  	transform: translate3d(0, -100px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes moveUp {
  from {
  }
  50%{
  	-webkit-transform: translate3d(0, -150%, 0);
  	transform: translate3d(0, -150%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
// moveUp